<template>
  <div class="topbar-wrap">
    <span class="title">{{ title }}</span>
    <div class="btns">
      <span>正确率</span>
      <span>{{ accuracy() }}%</span>
      <span class="count">{{ index + 1 }} / {{ total }}</span>
      <el-button @click="save">保存进度</el-button>
      <!--<el-button>重新开始</el-button>-->
    </div>
  </div>
</template>

<script>
export default {
  props: {
    answersResults: {
      type: Array,
      default: null
    },
    title: {
      type: String,
      default: ''
    },
    total: {
      type: Number,
      default: 0
    },
    index: {
      type: Number,
      default: 0
    }
  },
  methods: {
    save() {
      this.$emit('save')
    },
    accuracy() {
      let successCount = 0
      this.answersResults.forEach(item => {
        if (item === 1) {
          successCount++
        }
      })
      return (successCount / this.total * 100).toFixed(2)
    }
  }
}
</script>

<style lang="scss" scoped>
  .topbar-wrap {
    display: flex;
    line-height: 60px;
    background: #f6f8f8;
    border-bottom: 1px solid #ddd;
  }
  .title {
    flex: 1;
    text-indent: 20px;
  }
  .count {
    margin: 0 20px;
  }
  .btns {
    width: 400px;
  }
</style>
